﻿<html>
<head>
	<title>Momentum Demo Page</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="styles.css"/>
	<script type="text/javascript" src="lib/html.js"></script>
	<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="lib/raphael-min.js"></script>
	<script type="text/javascript" src="mote.js"></script>
	<script type="text/javascript">
		$(function(){
			$("h1").after(Html.div({style:"font-style:italic; color:#ccc;"}, "Powered by MoteJS v.", Mote.version));
			
			var world = Mote.world($("#screen"), function(world, screen){
				var ground = world.gravity.groundPosition;
				var width = screen.width;
				screen.rect(0, 0, screen.width, ground).attr({fill:"90-#eef-#cde", "stroke-width":0});
				screen.rect(0, ground, screen.width, screen.height-ground).attr({fill:"90-#8a4-#aba", "stroke-width":0});
				screen.path(["M0,",ground,"L",width,",",ground]);
			});
			
			var count = 0;
			world.gravity.acceleration = function(solid){
				//if(count++>100) throw "Execution stopped by developer";
				var a = new Mote.Vector(solid.velocity).Mul(-1e-4);
				return a;
			};
			
			

			
			Mote.solid(world, [225, 85], {
				mass: 8,
				velocity:[.3, 0],
				template: function(screen){
					var d = 10;
					return screen.circle(d, d, d).attr({fill:"#ee8", stroke:"#448"});
				}
			});
			
			Mote.solid(world, [395, 85], {
				mass: 8,
				velocity:[0, 0],
				template: function(screen){
					var d = 10;
					return screen.circle(d, d, d).attr({fill:"#eee", stroke:"#448"});
				}
			});
			
		});
	</script>
</head>
<body>
	<h1>Momentum Demo Page</h1>
	<div id="screen" style="border:1px solid #ccc; margin:5px; width:900px; height:500px;"></div>
</body>
</html>